<template>
  <div class="login-container">
    <!--登录面板内容部分-->
    <div class="login-inner">
      <!--面板头部-->
      <div class="login-header">
        <div class="login-logo">
          <img src="./images/funky_logo.png" alt="" width="150" height="150">
        </div>
        <!--面板标题-->
        <div class="login-header-title">
          <a href="javascript:" :class="{current:loginMode}" @click="dealLoginMode(true)">登录</a>
        </div>
      </div>
      <!--面板表单部分-->
      <div class="login-content">
        <form>
          <!--手机验证码登录部分-->
          <div :class="{current:loginMode}">
            <section class="login-message">
              <label>
                <input type="text" maxlength="11" placeholder="手机号 新号码默认注册" v-model="phone">
              </label>
              <button v-if="!countDown" class="get-verification" style="color: black" :class="{phone_right:phoneRight}"
                      @click.prevent="getVerifyCode()">获取验证码
              </button>
              <button v-else disabled="disabled" class="get-verification" style="color: black">
                已发送({{ countDown }})
              </button>
            </section>
            <section class="login-verification">
              <label>
                <input type="text" maxlength="8" placeholder="验证码" v-model="code"/>
              </label>
            </section>
            <section class="login-hint">
              <van-checkbox v-model="checked">我认真阅读、理解并同意<a href="javascript:" class="to-agree">服务协议与隐私政策</a></van-checkbox>
            </section>
          </div>
          <button class="login-submit" @click.prevent="login">登录</button>
        </form>
        <button class="login-back" @click.prevent="back">返回</button>
      </div>
    </div>
    <div class="other-login">
      <span>第三方验证</span>
      <div class="other-login-logo">
        <van-image  :src="require('../login/images/zfb_logo.png')" @click="alipay" width="50" style="cursor: pointer"></van-image>
      </div>
    </div>
    <van-loading
        v-if="!showLoading"
        type="spinner"
        color="black"
        style="position: absolute;left:50%;top: 70%;transform: translate(-50%);font-size: 14px;"
    >
      正在登录中，请耐心等待…
    </van-loading>
  </div>
</template>

<script>

import { Toast } from 'vant';
import {getSms, loginReq,zfbLogin} from "@/api/api";
import {mapState} from "vuex";


export default {

  // eslint-disable-next-line vue/multi-word-component-names
  name: "Login",
  data() {
    return {
      checked: false,
      loginMode: true,  // 1. 登录模式
      passwordMode: true, // 2. 密码模式
      phone: localStorage.getItem("phone"),  // 3. 手机号码
      countDown: 0,  // 4. 倒计时
      code: null,  // 5. 手机验证码
      userInfo: null,  // 6. 接收用户信息
      userName: null, // 7. 用户名
      userPwd: null, // 8. 密码
      captcha: null, // 9. 图形验证码
      showLoading: true,
      zbfUrl: null,
    }
  },
  methods: {
    alipay(){
      zfbLogin().then((response) =>{
        const certifyUrl = "alipays://platformapi/startapp?appId=20000067&url="+encodeURIComponent("https://authcenter.alipaydev.com/login/index.htm?goto="+encodeURIComponent(response.data.data.url));
        localStorage.setItem("zfb","ok")
        location.href = certifyUrl
      }).catch(
          (err) => alert(err.response)
      )
    },
    back() {  // 1. 放回上一级路由
      // this.$router.back();
        this.$router.push({path:'/dashboard/home'})
    },
    dealLoginMode(flag) { // 2. 处理登录模式
      this.loginMode = flag;
    },
    async getVerifyCode() { // 4. 获取短信验证码
      console.log(666)

      if (this.phoneRight) {// 4.1 过滤

        //请求后端接口
        getSms(this.phone).then((response) => {
          var code = response.data.code;
          if (code === 2000){
            Toast({
              message: '发送短信成功',
              duration: 500
            });
          }else{
            Toast({
              message: '发送短信失败',
              duration: 500
            });
          }
        });

        this.countDown = 60;
        // 4.2 倒计时
        this.intervalId = setInterval(() => {
          this.countDown--;
          if (this.countDown === 0) {
            clearInterval(this.intervalId);
          }
        }, 1000);
      }
    },
    async login() {  // 5. 登录

      if (this.loginMode) { // 判断登录模式 手机验证码登录
        // 5.1 输入数据校验
        // 5.1.1 手机号码验证
        if (this.phone && !this.phone.trim()) {
          Toast({
            message: '请输入手机号码',
            duration: 500
          });
          return;
        } else if (!this.phoneRight) {
          Toast({
            message: '请输入正确手机号码',
            duration: 500
          });
          return;
        }
        // 5.1.2 验证码验证
        if (this.code && !this.code.trim()) {
          Toast({
            message: '请输入验证码',
            duration: 500
          });
          return;
        }
        else if (!(/^\d{4}$/gi.test(this.code))) {
          Toast({
            message: '请输入正确验证码',
            duration: 500
          });
          return;
        }
        else if(!this.checked){
          Toast({
            message: '请确认服务协议',
            duration: 500
          });
          return;
        }
        // 5.1.3 手机验证码登录
        loginReq(this.phone,this.code).then((response) =>{
          //前端获取令牌，存入vuex

          if (response.data.code === 2000) {
            localStorage.setItem("token",response.headers.authentication)
            console.log(response.headers.authentication)
            Toast({
              message: '登录成功',
              duration: 1000
            });
              this.$router.push("/dashboard/home");
            localStorage.setItem("phone",this.phone);
          } else if (response.data.code === 2001){
            Toast({
              message: '登录失败，短信或手机号错误',
              duration: 500
            });
          }else if (response.data.code === 3001){
            Toast({
              message: '验证码过期',
              duration: 500
            });
          }
          this.showLoading = true;
        })
        this.showLoading = false;
      }
    },
  },
  computed: {
    phoneRight() {// 验证手机号码是否正确
      return /^1[3456789]\d{9}$/.test(this.phone);
    },
    ...mapState(["otherLogin"])
  }
}
</script>

<style scoped>
.login-container {
  width: 100%;
  height: 100%;
  background: #fff;
}

.login-container .login-inner {
  padding-top: 20px;
  width: 80%;
  margin: 0 auto;
}

.login-container .login-inner .login-header .login-logo {
  font-size: 40px;
  font-weight: bold;
  color: #75a342;
  text-align: center
}

.login-container .login-inner .login-header .login-header-title {
  padding-bottom: 10px;
  margin-left: 40px;
  text-align: center;
}

.login-container .login-inner .login-header .login-header-title > a {
  color: #333;
  font-size: 14px;
  padding-bottom: 4px;
  text-decoration: none;
}

.login-container .login-inner .login-header .login-header-title > a:first-child {
  margin-right: 40px
}

.login-container .login-inner .login-header .login-header-title > a.current {
  color: #75a342;
  font-weight: 700;
  font-size: 35px;
}

.login-container .login-inner .login-content > form > div {
  display: none;
}

.login-container .login-inner .login-content > form > div.current {
  display: block
}

.login-container .login-inner .login-content > form > div input {
  width: 100%;
  height: 100%;
  padding-left: 8px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: 0;
  font: 400 14px Arial;
}

.login-container .login-inner .login-content > form > div input:focus {
  border: 1px solid #75a342
}

.login-container .login-inner .login-content > form > div .login-message {
  position: relative;
  margin-top: 16px;
  height: 48px;
  font-size: 14px;
  background: #fff;
}

.login-container .login-inner .login-content > form > div .login-message .get-verification {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  border: 0;
  color: #ccc;
  font-size: 14px;
  background: transparent;
}

.login-container .login-inner .login-content > form > div .login-message .get-verification.phone_right {
  color: #75a342
}

.login-container .login-inner .login-content > form > div .login-verification {
  position: relative;
  margin-top: 16px;
  height: 48px;
  font-size: 14px;
  background: #fff;
}

.login-container .login-inner .login-content > form > div .login-verification .switch-show {
  position: absolute;
  right: 10px;
  top: 12px;
}

.login-container .login-inner .login-content > form > div .login-verification .switch-show img {
  display: none
}

.login-container .login-inner .login-content > form > div .login-verification .switch-show img.on {
  display: block
}

.login-container .login-inner .login-content > form > div .login-hint {
  margin-top: 12px;
  color: #999;
  font-size: 12px;
  line-height: 20px;
}

.login-container .login-inner .login-content > form > div .login-hint > a {
  color: #75a342
}

.login-container .login-inner .login-content > form .login-submit {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 30px;
  border-radius: 4px;
  background: #75a342;
  color: #fff;
  text-align: center;
  font-size: 16px;
  line-height: 42px;
  border: 0
}

.login-container .login-inner .login-content .login-back {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 15px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid #75a342;
  color: #75a342;
  text-align: center;
  font-size: 16px;
  line-height: 42px
}

.login-container .other-login{
  margin-top: 10px;
  margin-left: 40%;
}
.login-container .other-login .other-login-logo{
  margin-top: 10px;
  margin-left: 10%;
}
.to-agree{
  color: #75a342;
}
</style>
